<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="基础配置">
        <el-form
          ref="form"
          v-loading="infoLoading"
          class="common-form"
          :model="form"
          label-width="190px"
        >
          <el-divider content-position="left">极光推送</el-divider>
          <el-form-item label="极光推送appkey">
            <el-input v-model="form.jpush_appkey" class="middle" />
          </el-form-item>
          <el-form-item label="极光推送appsecret">
            <el-input v-model="form.jpush_appsecret" class="middle" />
          </el-form-item>
          <el-divider content-position="left">安卓更新设置</el-divider>
          <el-form-item label="安卓下载地址">
            <el-input v-model="form.app_android_download_url" class="middle" />
          </el-form-item>
          <el-form-item label="安卓当前版本号">
            <el-input v-model="form.app_android_version" class="middle" />
          </el-form-item>
          <el-form-item label="安卓当前版本更新内容">
            <el-input v-model="form.app_android_upgrade_content" type="textarea" :rows="4" class="middle" />
          </el-form-item>
          <el-form-item label="安卓开启强制更新">
            <el-switch
              v-model="form.app_android_upgrade_force"
            />
          </el-form-item>
          <el-divider content-position="left">IOS更新设置</el-divider>
          <el-form-item label="ios下载地址">
            <el-input v-model="form.app_ios_download_url" class="middle" />
          </el-form-item>
          <el-form-item label="ios当前版本号">
            <el-input v-model="form.app_ios_version" class="middle" />
          </el-form-item>
          <el-form-item label="ios当前版本更新内容">
            <el-input v-model="form.app_ios_upgrade_content" type="textarea" :rows="4" class="middle" />
          </el-form-item>
          <el-form-item label="ios开启强制更新">
            <el-switch
              v-model="form.app_ios_upgrade_force"
            />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { setConfig } from '@/api/configuration'

export default {
  data() {
    return {
      infoLoading: true,
      form: {
        jpush_appkey: '',
        jpush_appsecret: '',
        app_android_download_url: '',
        app_ios_download_url: '',
        app_android_version: '',
        app_ios_version: '',
        app_android_upgrade_content: '',
        app_ios_upgrade_content: '',
        app_android_upgrade_force: false,
        app_ios_upgrade_force: false
      }
    }
  },
  created() {
    this.fetchInfo()
  },
  methods: {
    fetchInfo() {
      this.infoLoading = true
      const param = {}
      setConfig(param, 'get')
        .then(response => {
          const {
            jpush_appkey,
            jpush_appsecret,
            app_android_download_url,
            app_ios_download_url,
            app_android_version,
            app_ios_version,
            app_android_upgrade_content,
            app_ios_upgrade_content,
            app_android_upgrade_force,
            app_ios_upgrade_force
          } = { ...response.data }
          this.form = {
            jpush_appkey,
            jpush_appsecret,
            app_android_download_url,
            app_ios_download_url,
            app_android_version,
            app_ios_version,
            app_android_upgrade_content,
            app_ios_upgrade_content,
            app_android_upgrade_force: app_android_upgrade_force == 1,
            app_ios_upgrade_force: app_ios_upgrade_force == 1
          }
          this.infoLoading = false
        })
        .catch(() => {})
    },
    onSubmit(formName) {
      const insertData = { ...this.form }
      insertData.app_android_upgrade_force = insertData.app_android_upgrade_force === true ? 1 : 0
      insertData.app_ios_upgrade_force = insertData.app_ios_upgrade_force === true ? 1 : 0
      this.$refs[formName].validate(valid => {
        if (valid) {
          setConfig(insertData)
            .then(response => {
              this.$message.success(response.message)
              return true
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.middle{
  width:500px;
}
</style>

